<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vscode上配置Eslint+Prettier | 星辰阁</title>
  <meta name="keywords" content=" 前端开发 , vscode , eslint , prettier ">
  <meta name="description" content="vscode上配置Eslint+Prettier | 星辰阁">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="个人简介李瑞桐 毕业于东北石油大学，目前从事殡葬相关应用开发工作。 喜欢研究新兴技术。 联系方式QQ :86415270邮箱 :86415270@qq.com">
<meta property="og:type" content="website">
<meta property="og:title" content="about">
<meta property="og:url" content="https://loveyangxiaoyu.gitee.io/lrt_blog/about/index.html">
<meta property="og:site_name" content="星辰阁">
<meta property="og:description" content="个人简介李瑞桐 毕业于东北石油大学，目前从事殡葬相关应用开发工作。 喜欢研究新兴技术。 联系方式QQ :86415270邮箱 :86415270@qq.com">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2019-11-11T07:11:13.000Z">
<meta property="article:modified_time" content="2022-11-20T05:27:08.036Z">
<meta property="article:author" content="李瑞桐">
<meta name="twitter:card" content="summary">


<link rel="icon" href="/lrt_blog/img/favicon.png" type="images/x-icon">

<link href="/lrt_blog/css/style.css?v=1.0.0" rel="stylesheet">

<link href="/lrt_blog/css/hl_theme/atom-light.css?v=1.0.0" rel="stylesheet">

<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="/lrt_blog/js/jquery.autocomplete.min.js?v=1.0.0" ></script>

<script src="//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>

<script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>



<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js" ></script>

<script src="/lrt_blog/js/iconfont.js?v=1.0.0" ></script>

<meta name="generator" content="Hexo 4.2.1"><link rel="alternate" href="/lrt_blog/atom.xml" title="星辰阁" type="application/atom+xml">
</head>
<div style="display: none">
  <input class="theme_disqus_on" value="false">
  <input class="theme_preload_comment" value="false">
  <input class="theme_blog_path" value="/lrt_blog">
</div>

<body>
<aside class="nav">
    <div class="nav-left">
        <a href="/lrt_blog/" class="avatar_target">
    <img class="avatar" src="/lrt_blog/img/avatar.jpg" />
</a>
<div class="author">
    <span>李瑞桐</span>
</div>

<div class="icon">
    
        
        <a title="rss" href="/lrt_blog/atom.xml" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-rss"></use>
                </svg>
            
        </a>
        
    
        
        <a title="github" href="https://github.com/lrt890424" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-github"></use>
                </svg>
            
        </a>
        
    
        
        <a title="gitee" href="https://gitee.com/loveyangxiaoyu" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-gitee"></use>
                </svg>
            
        </a>
        
    
        
    
        
    
        
        <a title="csdn" href="https://blog.csdn.net/lrt890424" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-csdn"></use>
                </svg>
            
        </a>
        
    
        
        <a title="oschina" href="https://my.oschina.net/loveyangxiaoyu" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-oschina"></use>
                </svg>
            
        </a>
        
    
        
    
</div>




<ul>
    <li><div class="all active">全部文章<small>(33)</small></div></li>
    
        
            
            <li><div data-rel="Linux"><i class="fold iconfont icon-right"></i>Linux<small>(9)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="CentOS">CentOS<small>(3)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="Ubuntu">Ubuntu<small>(2)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
        
    
        
            
        
    
        
            
            <li><div data-rel="开发工具"><i class="fold iconfont icon-right"></i>开发工具<small>(6)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="SVN">SVN<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="Git">Git<small>(2)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="jd-gui">jd-gui<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="Markdown">Markdown<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="Maven">Maven<small>(1)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
            <li><div data-rel="存储"><i class="fold iconfont icon-right"></i>存储<small>(7)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="MongoDB">MongoDB<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="MySQL">MySQL<small>(3)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="Redis">Redis<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="Navicat">Navicat<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="DM">DM<small>(1)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
            <li><div data-rel="Windows">Windows<small>(3)</small></div>
                
            </li>
            
        
    
        
            
        
    
        
            
            <li><div data-rel="笔记">笔记<small>(1)</small></div>
                
            </li>
            
        
    
        
            
        
    
        
            
            <li><div data-rel="Web服务器"><i class="fold iconfont icon-right"></i>Web服务器<small>(1)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="Nginx">Nginx<small>(1)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
            <li><div data-rel="容器"><i class="fold iconfont icon-right"></i>容器<small>(1)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="Docker">Docker<small>(1)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
            <li><div data-rel="前端开发"><i class="fold iconfont icon-right"></i>前端开发<small>(3)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="Vue CLI">Vue CLI<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="Yarn">Yarn<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="Eslint">Eslint<small>(1)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
            <li><div data-rel="工具"><i class="fold iconfont icon-right"></i>工具<small>(1)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="hexo">hexo<small>(1)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
            <li><div data-rel="开源">开源<small>(1)</small></div>
                
            </li>
            
        
    
        
            
        
    
</ul>
<div class="left-bottom">
    <div class="menus">
    
    
    
    
    </div>
    <div><a class="about  site_url"  href="/lrt_blog/about">关于</a></div>
</div>
<input type="hidden" id="yelog_site_posts_number" value="33">
<input type="hidden" id="yelog_site_word_count" value="52k">
<div style="display: none">
    <span id="busuanzi_value_site_uv"></span>
    <span id="busuanzi_value_site_pv"></span>
</div>

    </div>
    <div class="nav-right">
        <div class="friends-area">
    <div class="friends-title">
        友情链接
        <i class="back-title-list"></i>
    </div>
    <div class="friends-content">
        <ul>
            
            <li><a target="_blank" href="http://yelog.org/">叶落阁</a></li>
            
        </ul>
    </div>
</div>
        <div class="title-list">
    <form onkeydown="if(event.keyCode==13){return false;}">
        <input class="search" type="text" placeholder="以 in: 开头进行全文搜索" autocomplete="off"id="local-search-input" >
        <i class="cross"></i>
        <span>
            <label for="tagswitch">Tags:</label>
            <input id="tagswitch" type="checkbox" style="display: none" />
            <i id="tagsWitchIcon"></i>
        </span>
    </form>
    <div class="tags-list">
    
    <li class="article-tag-list-item">
        <a class="color3">教程</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">centos</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">linux</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">问题集锦</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">防火墙</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">软件安装</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">ubuntu</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">svn</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">git</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">MongoDB</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">jd-gui</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">java</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">反编译</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">MySQL</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">Redis</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">学习笔记</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">navicat</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">DM</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">windows</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">系统优化</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">书签</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">Nginx</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">docker</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">vue</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">Yarn</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">前端开发</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">vscode</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">eslint</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">prettier</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">Markdown</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">hexo</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">开源</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">Maven</a>
    </li>
    
    <div class="clearfix"></div>
</div>

    
    <div id="local-search-result">

    </div>
    
    <nav id="title-list-nav">
        
        <a  class="Windows "
           href="/lrt_blog/2022/11/20/01Windows/Windows11%E4%BC%98%E5%8C%96%E9%85%8D%E7%BD%AE/"
           data-tag="windows,系统优化"
           data-author="" >
            <span class="post-title" title="Windows11优化配置">Windows11优化配置</span>
            <span class="post-date" title="2022-11-20 00:00:00">2022/11/20</span>
        </a>
        
        <a  class="存储 DM "
           href="/lrt_blog/2021/11/16/04%E5%AD%98%E5%82%A8/%E9%93%B6%E6%B2%B3%E9%BA%92%E9%BA%9F%E5%AE%89%E8%A3%85%E8%BE%BE%E6%A2%A6%E6%95%B0%E6%8D%AE%E5%BA%93/"
           data-tag="软件安装,DM"
           data-author="" >
            <span class="post-title" title="银河麒麟安装达梦数据库">银河麒麟安装达梦数据库</span>
            <span class="post-date" title="2021-11-16 00:00:00">2021/11/16</span>
        </a>
        
        <a  class="前端开发 Vue CLI "
           href="/lrt_blog/2021/02/02/66%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/vue-cli%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE/"
           data-tag="教程,vue"
           data-author="" >
            <span class="post-title" title="Vue CLI创建项目">Vue CLI创建项目</span>
            <span class="post-date" title="2021-02-02 21:08:20">2021/02/02</span>
        </a>
        
        <a  class="前端开发 Eslint "
           href="/lrt_blog/2021/02/01/66%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/vscode%E4%B8%8A%E9%85%8D%E7%BD%AEEslint-Prettier/"
           data-tag="前端开发,vscode,eslint,prettier"
           data-author="" >
            <span class="post-title" title="vscode上配置Eslint+Prettier">vscode上配置Eslint+Prettier</span>
            <span class="post-date" title="2021-02-01 00:00:00">2021/02/01</span>
        </a>
        
        <a  class="前端开发 Yarn "
           href="/lrt_blog/2021/01/31/66%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/%E5%8C%85%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7yarn%E5%AE%89%E8%A3%85%E5%92%8C%E9%85%8D%E7%BD%AE/"
           data-tag="教程,Yarn"
           data-author="" >
            <span class="post-title" title="包管理工具yarn安装和配置">包管理工具yarn安装和配置</span>
            <span class="post-date" title="2021-01-31 17:37:05">2021/01/31</span>
        </a>
        
        <a  class="Web服务器 Nginx "
           href="/lrt_blog/2020/04/30/05web%E6%9C%8D%E5%8A%A1%E5%99%A8/Linux%E4%B8%8B%E5%AE%89%E8%A3%85Nginx%E6%9C%8D%E5%8A%A1/"
           data-tag="软件安装,Nginx"
           data-author="" >
            <span class="post-title" title="Linux下安装Nginx服务">Linux下安装Nginx服务</span>
            <span class="post-date" title="2020-04-30 10:10:58">2020/04/30</span>
        </a>
        
        <a  class="存储 MongoDB "
           href="/lrt_blog/2020/04/30/04%E5%AD%98%E5%82%A8/Linux%E4%B8%8B%E5%AE%89%E8%A3%85MongoDB%E6%9C%8D%E5%8A%A1/"
           data-tag="软件安装,MongoDB"
           data-author="" >
            <span class="post-title" title="Linux下安装MongoDB服务">Linux下安装MongoDB服务</span>
            <span class="post-date" title="2020-04-30 00:00:00">2020/04/30</span>
        </a>
        
        <a  class="存储 Redis "
           href="/lrt_blog/2020/04/30/04%E5%AD%98%E5%82%A8/Linux%E4%B8%8B%E5%AE%89%E8%A3%85Redis%E6%9C%8D%E5%8A%A1/"
           data-tag="软件安装,Redis"
           data-author="" >
            <span class="post-title" title="Linux下安装Redis服务">Linux下安装Redis服务</span>
            <span class="post-date" title="2020-04-30 00:00:00">2020/04/30</span>
        </a>
        
        <a  class="容器 Docker "
           href="/lrt_blog/2020/01/04/03%E5%AE%B9%E5%99%A8/docker%E7%A6%BB%E7%BA%BF%E5%AE%89%E8%A3%85/"
           data-tag="软件安装,docker"
           data-author="" >
            <span class="post-title" title="docker离线安装">docker离线安装</span>
            <span class="post-date" title="2020-01-04 00:00:00">2020/01/04</span>
        </a>
        
        <a  class="笔记 "
           href="/lrt_blog/2019/12/26/07Java/%E5%AD%A6%E4%B9%A0-%E4%B9%A6%E7%AD%BE/"
           data-tag="书签"
           data-author="" >
            <span class="post-title" title="学习-书签">学习-书签</span>
            <span class="post-date" title="2019-12-26 00:00:00">2019/12/26</span>
        </a>
        
        <a  class="开源 "
           href="/lrt_blog/2019/12/19/77%E5%85%B6%E4%BB%96%E5%B7%A5%E5%85%B7/%E5%9B%BD%E5%86%85%E5%BC%80%E6%BA%90%E9%95%9C%E5%83%8F%E7%AB%99%E7%82%B9/"
           data-tag="开源"
           data-author="" >
            <span class="post-title" title="国内开源镜像站点">国内开源镜像站点</span>
            <span class="post-date" title="2019-12-19 00:00:00">2019/12/19</span>
        </a>
        
        <a  class="存储 MySQL "
           href="/lrt_blog/2019/12/16/04%E5%AD%98%E5%82%A8/MySQL%20%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"
           data-tag="MySQL,学习笔记"
           data-author="" >
            <span class="post-title" title="MySQL 学习笔记">MySQL 学习笔记</span>
            <span class="post-date" title="2019-12-16 00:00:00">2019/12/16</span>
        </a>
        
        <a  class="存储 MySQL "
           href="/lrt_blog/2019/12/15/04%E5%AD%98%E5%82%A8/Linux%E7%8E%AF%E5%A2%83%E4%B8%8B%E5%AE%89%E8%A3%85MySQL%E6%9C%8D%E5%8A%A1/"
           data-tag="软件安装,MySQL"
           data-author="" >
            <span class="post-title" title="Linux环境下安装MySQL服务">Linux环境下安装MySQL服务</span>
            <span class="post-date" title="2019-12-15 00:00:00">2019/12/15</span>
        </a>
        
        <a  class="存储 Navicat "
           href="/lrt_blog/2019/12/15/04%E5%AD%98%E5%82%A8/Navicat%20Premium%2012%20%E7%A0%B4%E8%A7%A3/"
           data-tag="软件安装,navicat"
           data-author="" >
            <span class="post-title" title="Navicat Premium 12 破解">Navicat Premium 12 破解</span>
            <span class="post-date" title="2019-12-15 00:00:00">2019/12/15</span>
        </a>
        
        <a  class="存储 MySQL "
           href="/lrt_blog/2019/12/15/04%E5%AD%98%E5%82%A8/Windows%E7%8E%AF%E5%A2%83%E4%B8%8B%E5%AE%89%E8%A3%85MySQL%E6%9C%8D%E5%8A%A1/"
           data-tag="软件安装,MySQL"
           data-author="" >
            <span class="post-title" title="Windows环境下安装MySQL服务">Windows环境下安装MySQL服务</span>
            <span class="post-date" title="2019-12-15 00:00:00">2019/12/15</span>
        </a>
        
        <a  class="开发工具 SVN "
           href="/lrt_blog/2019/12/01/02%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/Windows%E7%8E%AF%E5%A2%83%E4%B8%8B%E6%90%AD%E5%BB%BASVN%E6%9C%8D%E5%8A%A1%E5%99%A8/"
           data-tag="软件安装,svn"
           data-author="" >
            <span class="post-title" title="Windows环境下搭建SVN服务器">Windows环境下搭建SVN服务器</span>
            <span class="post-date" title="2019-12-01 00:00:00">2019/12/01</span>
        </a>
        
        <a  class="开发工具 Git "
           href="/lrt_blog/2019/11/30/02%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/git%E9%97%AE%E9%A2%98%E9%9B%86%E9%94%A6/"
           data-tag="问题集锦,git"
           data-author="" >
            <span class="post-title" title="git问题集锦">git问题集锦</span>
            <span class="post-date" title="2019-11-30 00:00:00">2019/11/30</span>
        </a>
        
        <a  class="开发工具 Git "
           href="/lrt_blog/2019/11/30/02%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/Git%20%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"
           data-tag="git"
           data-author="" >
            <span class="post-title" title="Git 学习笔记">Git 学习笔记</span>
            <span class="post-date" title="2019-11-30 00:00:00">2019/11/30</span>
        </a>
        
        <a  class="开发工具 jd-gui "
           href="/lrt_blog/2019/11/30/02%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/jd-gui%E5%8F%8D%E7%BC%96%E8%AF%91jar%E5%90%8E%E6%B8%85%E9%99%A4%E5%90%8E%E9%9D%A2%E7%9A%84%E6%B3%A8%E9%87%8A%E4%BF%A1%E6%81%AF%E5%8F%8A%E8%A1%8C%E5%8F%B7/"
           data-tag="jd-gui,java,反编译"
           data-author="" >
            <span class="post-title" title="jd-gui反编译jar后清除后面的注释信息及行号">jd-gui反编译jar后清除后面的注释信息及行号</span>
            <span class="post-date" title="2019-11-30 00:00:00">2019/11/30</span>
        </a>
        
        <a  class="开发工具 Maven "
           href="/lrt_blog/2019/11/30/02%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/Maven%20%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"
           data-tag="教程,Maven"
           data-author="" >
            <span class="post-title" title="Maven 学习笔记">Maven 学习笔记</span>
            <span class="post-date" title="2019-11-30 00:00:00">2019/11/30</span>
        </a>
        
        <a  class="Windows "
           href="/lrt_blog/2019/11/24/01Windows/Windows10%E4%BC%98%E5%8C%96%E9%85%8D%E7%BD%AE/"
           data-tag="windows,系统优化"
           data-author="" >
            <span class="post-title" title="Windows10优化配置">Windows10优化配置</span>
            <span class="post-date" title="2019-11-24 00:00:00">2019/11/24</span>
        </a>
        
        <a  class="Windows "
           href="/lrt_blog/2019/11/24/01Windows/Windows10%E5%8F%96%E6%B6%88%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0/"
           data-tag="windows,系统优化"
           data-author="" >
            <span class="post-title" title="Windows10取消自动更新">Windows10取消自动更新</span>
            <span class="post-date" title="2019-11-24 00:00:00">2019/11/24</span>
        </a>
        
        <a  class="Linux CentOS "
           href="/lrt_blog/2019/11/23/01Linux/CentOS%20yum%E5%91%BD%E4%BB%A4/"
           data-tag="教程,centos"
           data-author="" >
            <span class="post-title" title="yum命令">yum命令</span>
            <span class="post-date" title="2019-11-23 00:00:00">2019/11/23</span>
        </a>
        
        <a  class="Linux Ubuntu "
           href="/lrt_blog/2019/11/23/01Linux/sudo%E7%9B%B8%E5%85%B3%E6%93%8D%E4%BD%9C/"
           data-tag="教程,linux"
           data-author="" >
            <span class="post-title" title="sudo相关操作">sudo相关操作</span>
            <span class="post-date" title="2019-11-23 00:00:00">2019/11/23</span>
        </a>
        
        <a  class="Linux CentOS "
           href="/lrt_blog/2019/11/23/01Linux/CentOS%20%E6%97%B6%E5%8C%BA%E9%97%AE%E9%A2%98/"
           data-tag="centos,问题集锦"
           data-author="" >
            <span class="post-title" title="CentOS时区问题">CentOS时区问题</span>
            <span class="post-date" title="2019-11-23 00:00:00">2019/11/23</span>
        </a>
        
        <a  class="Linux "
           href="/lrt_blog/2019/11/23/01Linux/Linux%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/"
           data-tag="教程,linux"
           data-author="" >
            <span class="post-title" title="Linux常用命令">Linux常用命令</span>
            <span class="post-date" title="2019-11-23 00:00:00">2019/11/23</span>
        </a>
        
        <a  class="Linux CentOS "
           href="/lrt_blog/2019/11/23/01Linux/CentOS%20%E8%AE%BE%E7%BD%AE%E9%98%B2%E7%81%AB%E5%A2%99%E6%93%8D%E4%BD%9C%E3%80%81%E5%BC%80%E6%94%BE%E6%8C%87%E5%AE%9A%E7%AB%AF%E5%8F%A3%E6%93%8D%E4%BD%9C/"
           data-tag="centos,防火墙"
           data-author="" >
            <span class="post-title" title="CentOS设置防火墙操作、开放指定端口操作">CentOS设置防火墙操作、开放指定端口操作</span>
            <span class="post-date" title="2019-11-23 00:00:00">2019/11/23</span>
        </a>
        
        <a  class="Linux Ubuntu "
           href="/lrt_blog/2019/11/23/01Linux/ubuntu%20root%E7%94%A8%E6%88%B7%E5%91%BD%E4%BB%A4%E8%A1%A5%E5%85%A8/"
           data-tag="ubuntu"
           data-author="" >
            <span class="post-title" title="ubuntu root用户命令补全">ubuntu root用户命令补全</span>
            <span class="post-date" title="2019-11-23 00:00:00">2019/11/23</span>
        </a>
        
        <a  class="Linux "
           href="/lrt_blog/2019/11/17/01Linux/%E9%85%8D%E7%BD%AEip+yum%E6%88%96apt%E6%BA%90/"
           data-tag="教程,linux"
           data-author="" >
            <span class="post-title" title="配置ip+yum或apt源">配置ip+yum或apt源</span>
            <span class="post-date" title="2019-11-17 00:00:00">2019/11/17</span>
        </a>
        
        <a  class="Linux "
           href="/lrt_blog/2019/11/16/01Linux/%E8%99%9A%E6%8B%9F%E6%9C%BA%E4%B8%AD%E5%AE%89%E8%A3%85centos7.6%E6%95%99%E7%A8%8B/"
           data-tag="centos,软件安装"
           data-author="" >
            <span class="post-title" title="虚拟机中安装centos7.6教程">虚拟机中安装centos7.6教程</span>
            <span class="post-date" title="2019-11-16 00:00:00">2019/11/16</span>
        </a>
        
        <a  class="Linux "
           href="/lrt_blog/2019/11/16/01Linux/%E8%99%9A%E6%8B%9F%E6%9C%BA%E4%B8%AD%E5%AE%89%E8%A3%85ubuntu16.04.06%E6%95%99%E7%A8%8B/"
           data-tag="软件安装,ubuntu"
           data-author="" >
            <span class="post-title" title="虚拟机中安装ubuntu16.04.06教程">虚拟机中安装ubuntu16.04.06教程</span>
            <span class="post-date" title="2019-11-16 00:00:00">2019/11/16</span>
        </a>
        
        <a  class="工具 hexo "
           href="/lrt_blog/2019/11/14/77%E5%85%B6%E4%BB%96%E5%B7%A5%E5%85%B7/%E4%BD%BF%E7%94%A8Gitee+Hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/"
           data-tag="教程,hexo"
           data-author="" >
            <span class="post-title" title="使用Gitee+Hexo搭建个人博客">使用Gitee+Hexo搭建个人博客</span>
            <span class="post-date" title="2019-11-14 00:00:00">2019/11/14</span>
        </a>
        
        <a  class="开发工具 Markdown "
           href="/lrt_blog/2019/11/11/77%E5%85%B6%E4%BB%96%E5%B7%A5%E5%85%B7/Markdown%20%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"
           data-tag="教程,Markdown"
           data-author="" >
            <span class="post-title" title="Markdown 学习笔记">Markdown 学习笔记</span>
            <span class="post-date" title="2019-11-11 00:00:00">2019/11/11</span>
        </a>
        
    </nav>
</div>
    </div>
    <div class="hide-list">
        <div class="semicircle">
            <div class="brackets first"><</div>
            <div class="brackets">&gt;</div>
        </div>
    </div>
</aside>
<div class="post">
    <div class="pjax">
        <article id="post-66前端开发/vscode上配置Eslint-Prettier" class="article article-type-post" itemscope itemprop="blogPost">
    
        <h1 class="article-title">vscode上配置Eslint+Prettier</h1>
    
    <div class="article-meta">
        
        
        
        <span class="book">
            
                <a data-rel="前端开发">前端开发</a>/
            
                <a data-rel="Eslint">Eslint</a>
            
        </span>
        
        
        <span class="tag">
            
            <a class="color5">前端开发</a>
            
            <a class="color2">vscode</a>
            
            <a class="color2">eslint</a>
            
            <a class="color4">prettier</a>
            
        </span>
        
    </div>
    <div class="article-meta">
        
        创建时间:<time class="date" title='更新时间: 2022-11-20 17:10:34'>2021-02-01 00:00</time>
        
    </div>
    <div class="article-meta">
        
        <span>字数:7.6k</span>
        
        
        <span id="busuanzi_container_page_pv">
            阅读:<span id="busuanzi_value_page_pv">
                <span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </span>
        </span>
        
        
        <span class="top-comment" title="跳转至评论区">
            <a href="#comments">
                评论:<span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </a>
        </span>
        
    </div>
    
    <div class="toc-ref">
    
        <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#vscode上配置Eslint-Prettier"><span class="toc-text">vscode上配置Eslint+Prettier</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#ESLint"><span class="toc-text">ESLint</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#安装和使用"><span class="toc-text">安装和使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#配置"><span class="toc-text">配置</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#root"><span class="toc-text">root</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#env-环境配置"><span class="toc-text">env 环境配置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#extends继承规则"><span class="toc-text">extends继承规则</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#推荐规则"><span class="toc-text">推荐规则</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#parserOptions解析器选项"><span class="toc-text">parserOptions解析器选项</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#parser解析器"><span class="toc-text">parser解析器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#plugins插件"><span class="toc-text">plugins插件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#processor处理器"><span class="toc-text">processor处理器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#globals全局变量"><span class="toc-text">globals全局变量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#rules规则"><span class="toc-text">rules规则</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#配置文件格式"><span class="toc-text">配置文件格式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#eslintignore忽略文件"><span class="toc-text">.eslintignore忽略文件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Prettier"><span class="toc-text">Prettier</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Prettier-是什么"><span class="toc-text">Prettier 是什么</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Prettier安装"><span class="toc-text">Prettier安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#忽略文件-prettierignore"><span class="toc-text">忽略文件: .prettierignore</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#配置文件"><span class="toc-text">配置文件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#配置文件示例"><span class="toc-text">配置文件示例</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#配置参数说明"><span class="toc-text">配置参数说明</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#推荐配置-prettierrc-js"><span class="toc-text">推荐配置.prettierrc.js</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#editorconfig"><span class="toc-text">.editorconfig</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#gitattributes"><span class="toc-text">.gitattributes</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#插件安装"><span class="toc-text">插件安装</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#插件使用"><span class="toc-text">插件使用</span></a></li></ol></li></ol>
    
<style>
    .left-col .switch-btn,
    .left-col .switch-area {
        display: none;
    }
    .toc-level-3 i,
    .toc-level-3 ol {
        display: none !important;
    }
</style>
</div>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><div class='inner-toc'><h2>目录</h2><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#vscode上配置Eslint-Prettier"><span class="toc-text">vscode上配置Eslint+Prettier</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#ESLint"><span class="toc-text">ESLint</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#安装和使用"><span class="toc-text">安装和使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#配置"><span class="toc-text">配置</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#root"><span class="toc-text">root</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#env-环境配置"><span class="toc-text">env 环境配置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#extends继承规则"><span class="toc-text">extends继承规则</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#推荐规则"><span class="toc-text">推荐规则</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#parserOptions解析器选项"><span class="toc-text">parserOptions解析器选项</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#parser解析器"><span class="toc-text">parser解析器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#plugins插件"><span class="toc-text">plugins插件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#processor处理器"><span class="toc-text">processor处理器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#globals全局变量"><span class="toc-text">globals全局变量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#rules规则"><span class="toc-text">rules规则</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#配置文件格式"><span class="toc-text">配置文件格式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#eslintignore忽略文件"><span class="toc-text">.eslintignore忽略文件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Prettier"><span class="toc-text">Prettier</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Prettier-是什么"><span class="toc-text">Prettier 是什么</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Prettier安装"><span class="toc-text">Prettier安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#忽略文件-prettierignore"><span class="toc-text">忽略文件: .prettierignore</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#配置文件"><span class="toc-text">配置文件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#配置文件示例"><span class="toc-text">配置文件示例</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#配置参数说明"><span class="toc-text">配置参数说明</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#推荐配置-prettierrc-js"><span class="toc-text">推荐配置.prettierrc.js</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#editorconfig"><span class="toc-text">.editorconfig</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#gitattributes"><span class="toc-text">.gitattributes</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#插件安装"><span class="toc-text">插件安装</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#插件使用"><span class="toc-text">插件使用</span></a></li></ol></li></ol></div></p>
<h1 id="vscode上配置Eslint-Prettier"><a href="#vscode上配置Eslint-Prettier" class="headerlink" title="vscode上配置Eslint+Prettier"></a>vscode上配置Eslint+Prettier</h1><h2 id="ESLint"><a href="#ESLint" class="headerlink" title="ESLint"></a>ESLint</h2><p><a href="https://eslint.org/" target="_blank" rel="noopener">ESLint</a> 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外：</p>
<ul>
<li>ESLint 使用 <a href="https://github.com/eslint/espree" target="_blank" rel="noopener">Espree</a> 解析 JavaScript。</li>
<li>ESLint 使用 AST 去分析代码中的模式</li>
<li>ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则</li>
</ul>
<p><a href="https://eslint.bootcss.com/" target="_blank" rel="noopener">中文文档</a></p>
<h3 id="安装和使用"><a href="#安装和使用" class="headerlink" title="安装和使用"></a>安装和使用</h3><pre><code class="shell">#安装 npm i eslint -D
$ npm install eslint --save-dev
# yarn add eslint --dev

#初始化配置文件
$ ./node_modules/.bin/eslint --init</code></pre>
<h3 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h3><h4 id="root"><a href="#root" class="headerlink" title="root"></a>root</h4><p> 默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果发现配置文件中有 “root”: true，它就会停止在父级目录中寻找。</p>
<h4 id="env-环境配置"><a href="#env-环境配置" class="headerlink" title="env 环境配置"></a>env 环境配置</h4><p>使用 env 关键字指定你想启用的环境</p>
<pre><code class="js">env: {
    browser: true, //浏览器环境中的全局变量
    node: true, // Node.js 全局变量和 Node.js 作用域
    es6: true, //启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）
    commonjs: true, //CommonJS 全局变量和 CommonJS 作用域
    worker: true, // Web Workers 全局变量。
    amd: true, // 将 require() 和 define() 定义为像 amd 一样的全局变量。
    mocha: true, // 添加所有的 Mocha 测试全局变量。
    jasmine: true, // 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。
    jest: true, // Jest 全局变量。
    phantomjs: true, // PhantomJS 全局变量。
    protractor: true, // Protractor 全局变量。
    qunit: true, // QUnit 全局变量。
    jquery: true, // jQuery 全局变量。
    prototypejs: true, // Prototype.js 全局变量。
    shelljs: true, // ShellJS 全局变量。
    meteor: true, // Meteor 全局变量。
    mongo: true, // MongoDB 全局变量。
    applescript: true, // AppleScript 全局变量。
    nashorn: true, // Java 8 Nashorn 全局变量。
    serviceworker: true, // Service Worker 全局变量。
    atomtest: true, // Atom 测试全局变量。
    embertest: true, // Ember 测试全局变量。
    webextensions: true, // WebExtensions 全局变量。
    greasemonkey: true, // GreaseMonkey 全局变量。
}</code></pre>
<h4 id="extends继承规则"><a href="#extends继承规则" class="headerlink" title="extends继承规则"></a>extends继承规则</h4><p>一个配置文件可以从基础配置中继承已启用的规则。如果值为字符串数组则每个配置继承它前面的配置。值为 “eslint:recommended” 的 extends 属性启用了eslint<a href="https://cn.eslint.org/docs/rules/" target="_blank" rel="noopener">默认的规则</a>。</p>
<pre><code class="js">extends: [&#39;plugin:vue/recommended&#39;, &#39;eslint:recommended&#39;]</code></pre>
<pre><code class="js">// eslint:recommended

rules:{
    &#39;for-direction&#39;: &#39;error&#39;, //强制 “for” 循环中更新子句的计数器朝着正确的方向移动
    &#39;getter-return&#39;: &#39;error&#39;, //强制 getter 函数中出现 return 语句
    &#39;no-async-promise-executor&#39;: &#39;error&#39;, //禁止使用异步函数作为 Promise executor
    &#39;no-compare-neg-zero&#39;: &#39;error&#39;, //禁止与 -0 进行比较
    &#39;no-cond-assign&#39;: &#39;error&#39;, //禁止条件表达式中出现赋值操作符
    &#39;no-constant-condition&#39;: &#39;error&#39;, //禁止在条件中使用常量表达式
    &#39;no-control-regex&#39;: &#39;error&#39;, //禁止在正则表达式中使用控制字符
    &#39;no-debugger&#39;: &#39;error&#39;, //禁用 debugger
    &#39;no-dupe-args&#39;: &#39;error&#39;, //禁止 function 定义中出现重名参数
    &#39;no-dupe-keys&#39;: &#39;error&#39;, //禁止对象字面量中出现重复的 key
    &#39;no-duplicate-case&#39;: &#39;error&#39;, //禁止出现重复的 case 标签
    &#39;no-empty&#39;: &#39;error&#39;, //禁止出现空语句块
    &#39;no-empty-character-class&#39;: &#39;error&#39;, //禁止在正则表达式中使用空字符集
    &#39;no-ex-assign&#39;: &#39;error&#39;, //禁止对 catch 子句的参数重新赋值
    &#39;no-extra-boolean-cast&#39;: &#39;error&#39;, //禁止不必要的布尔转换
    &#39;no-extra-semi&#39;: &#39;error&#39;, //禁止不必要的分号
    &#39;no-func-assign&#39;: &#39;error&#39;, //禁止对 function 声明重新赋值
    &#39;no-inner-declarations&#39;: &#39;error&#39;, //禁止在嵌套的块中出现变量声明或 function 声明
    &#39;no-invalid-regexp&#39;: &#39;error&#39;, //禁止 RegExp 构造函数中存在无效的正则表达式字符串
    &#39;no-irregular-whitespace&#39;: &#39;error&#39;, //禁止不规则的空白
    &#39;no-misleading-character-class&#39;: &#39;error&#39;, //不允许在字符类语法中出现由多个代码点组成的字符
    &#39;no-obj-calls&#39;: &#39;error&#39;, //禁止把全局对象作为函数调用
    &#39;no-prototype-builtins&#39;: &#39;error&#39;, //禁止直接调用 Object.prototypes 的内置属性
    &#39;no-regex-spaces&#39;: &#39;error&#39;, //禁止正则表达式字面量中出现多个空格
    &#39;no-sparse-arrays&#39;: &#39;error&#39;, //禁用稀疏数组
    &#39;no-unexpected-multiline&#39;: &#39;error&#39;, //禁止出现令人困惑的多行表达式
    &#39;no-unreachable&#39;: &#39;error&#39;, //禁止在 return、throw、continue 和 break 语句之后出现不可达代码
    &#39;no-unsafe-finally&#39;: &#39;error&#39;, //禁止在 finally 语句块中出现控制流语句
    &#39;no-unsafe-negation&#39;: &#39;error&#39;, //禁止对关系运算符的左操作数使用否定操作符
    &#39;require-atomic-updates&#39;: &#39;error&#39;, //禁止由于 await 或 yield的使用而可能导致出现竞态条件的赋值
    &#39;use-isnan&#39;: &#39;error&#39;, //要求使用 isNaN() 检查 NaN
    &#39;valid-typeof&#39;: &#39;error&#39;, //强制 typeof 表达式与有效的字符串进行比较
    &#39;no-case-declarations&#39;: &#39;error&#39;, //不允许在 case 子句中使用词法声明
    &#39;no-empty-pattern&#39;: &#39;error&#39;, //禁止使用空解构模式
    &#39;no-fallthrough&#39;: &#39;error&#39;, //禁止 case 语句落空
    &#39;no-global-assign&#39;: &#39;error&#39;, //禁止对原生对象或只读的全局对象进行赋值
    &#39;no-octal&#39;: &#39;error&#39;, //禁用八进制字面量
    &#39;no-redeclare&#39;: &#39;error&#39;, //禁止多次声明同一变量
    &#39;no-self-assign&#39;: &#39;error&#39;, //禁止自我赋值
    &#39;no-unused-labels&#39;: &#39;error&#39;, //禁用出现未使用过的标
    &#39;no-useless-catch&#39;: &#39;error&#39;, //禁止不必要的 catch 子句
    &#39;no-useless-escape&#39;: &#39;error&#39;, //禁用不必要的转义字符
    &#39;no-with&#39;: &#39;error&#39;, //禁用 with 语句
    &#39;no-delete-var&#39;: &#39;error&#39;, //禁止删除变量
    &#39;no-shadow-restricted-names&#39;: &#39;error&#39;, //禁止将标识符定义为受限的名字
    &#39;no-undef&#39;: &#39;error&#39;, //禁用未声明的变量，除非它们在 /*global */ 注释中被提到
    &#39;no-unused-vars&#39;: &#39;error&#39;, //禁止出现未使用过的变量
    &#39;no-mixed-spaces-and-tabs&#39;: &#39;error&#39;, //禁止空格和 tab 的混合缩进
    &#39;constructor-super&#39;: &#39;error&#39;, //要求在构造函数中有 super() 的调用
    &#39;no-class-assign&#39;: &#39;error&#39;, //禁止修改类声明的变量
    &#39;no-const-assign&#39;: &#39;error&#39;, //禁止修改 const 声明的变量
    &#39;no-dupe-class-members&#39;: &#39;error&#39;, //禁止类成员中出现重复的名称
    &#39;no-new-symbol&#39;: &#39;error&#39;, //禁止 Symbolnew 操作符和 new 一起使用
    &#39;no-this-before-super&#39;: &#39;error&#39;, //禁止在构造函数中，在调用 super() 之前使用 this 或 super
    &#39;require-yield&#39;: &#39;error&#39;, //要求 generator 函数内有 yield
}</code></pre>
<ul>
<li><strong><a href="https://eslint.vuejs.org/" target="_blank" rel="noopener">eslint-plugin-vue</a></strong></li>
</ul>
<pre><code class="js">//  plugin:vue/recommended
rules: {
    &#39;vue/comment-directive&#39;: &#39;error&#39;,// 规则的唯一目的是在&lt;template&gt;和块级别提供eslint disable功能。
    &#39;vue/jsx-uses-vars&#39;: &#39;error&#39;,// ESLint no unused vars规则不会检测JSX中使用的变量（请参阅详细信息（打开新窗口））。此规则将查找JSX中使用的变量并将它们标记为已使用。
    &#39;vue/no-async-in-computed-properties&#39;: &#39;error&#39;,// 禁止在计算属性和函数中调用异步方法。
    &#39;vue/no-dupe-keys&#39;: &#39;error&#39;,// 禁止重复的属性名称
    &#39;vue/no-duplicate-attributes&#39;: &#39;error&#39;,//   禁止标签中重复的属性
    &#39;vue/no-parsing-error&#39;: &#39;error&#39;,
    &#39;vue/no-reserved-keys&#39;: &#39;error&#39;,
    &#39;vue/no-shared-component-data&#39;: &#39;error&#39;,
    &#39;vue/no-side-effects-in-computed-properties&#39;: &#39;error&#39;,
    &#39;vue/no-template-key&#39;: &#39;error&#39;,
    &#39;vue/no-textarea-mustache&#39;: &#39;error&#39;,
    &#39;vue/no-unused-components&#39;: &#39;error&#39;,
    &#39;vue/no-unused-vars&#39;: &#39;error&#39;,
    &#39;vue/no-use-v-if-with-v-for&#39;: &#39;error&#39;,
    &#39;vue/require-component-is&#39;: &#39;error&#39;,
    &#39;vue/require-prop-type-constructor&#39;: &#39;error&#39;,
    &#39;vue/require-render-return&#39;: &#39;error&#39;,
    &#39;vue/require-v-for-key&#39;: &#39;error&#39;,
    &#39;vue/require-valid-default-prop&#39;: &#39;error&#39;,
    &#39;vue/return-in-computed-property&#39;: &#39;error&#39;,
    &#39;vue/use-v-on-exact&#39;: &#39;error&#39;,
    &#39;vue/valid-template-root&#39;: &#39;error&#39;,
    &#39;vue/valid-v-bind&#39;: &#39;error&#39;,
    &#39;vue/valid-v-cloak&#39;: &#39;error&#39;,
    &#39;vue/valid-v-else-if&#39;: &#39;error&#39;,
    &#39;vue/valid-v-else&#39;: &#39;error&#39;,
    &#39;vue/valid-v-for&#39;: &#39;error&#39;,
    &#39;vue/valid-v-html&#39;: &#39;error&#39;,
    &#39;vue/valid-v-if&#39;: &#39;error&#39;,
    &#39;vue/valid-v-model&#39;: &#39;error&#39;,
    &#39;vue/valid-v-on&#39;: &#39;error&#39;,
    &#39;vue/valid-v-once&#39;: &#39;error&#39;,
    &#39;vue/valid-v-pre&#39;: &#39;error&#39;,
    &#39;vue/valid-v-show&#39;: &#39;error&#39;,
    &#39;vue/valid-v-text&#39;: &#39;error&#39;,
    &#39;vue/attribute-hyphenation&#39;: &#39;warn&#39;,
    &#39;vue/html-closing-bracket-newline&#39;: &#39;warn&#39;,
    &#39;vue/html-closing-bracket-spacing&#39;: &#39;warn&#39;,
    &#39;vue/html-end-tags&#39;: &#39;warn&#39;,
    &#39;vue/html-indent&#39;: &#39;warn&#39;,
    &#39;vue/html-quotes&#39;: &#39;warn&#39;,
    &#39;vue/html-self-closing&#39;: &#39;warn&#39;,
    &#39;vue/max-attributes-per-line&#39;: &#39;warn&#39;,
    &#39;vue/multiline-html-element-content-newline&#39;: &#39;warn&#39;,
    &#39;vue/mustache-interpolation-spacing&#39;: &#39;warn&#39;,
    &#39;vue/name-property-casing&#39;: &#39;warn&#39;,
    &#39;vue/no-multi-spaces&#39;: &#39;warn&#39;,
    &#39;vue/no-spaces-around-equal-signs-in-attribute&#39;: &#39;warn&#39;,
    &#39;vue/no-template-shadow&#39;: &#39;warn&#39;,
    &#39;vue/prop-name-casing&#39;: &#39;warn&#39;,
    &#39;vue/require-default-prop&#39;: &#39;warn&#39;,
    &#39;vue/require-prop-types&#39;: &#39;warn&#39;,
    &#39;vue/singleline-html-element-content-newline&#39;: &#39;warn&#39;,
    &#39;vue/v-bind-style&#39;: &#39;warn&#39;,
    &#39;vue/v-on-style&#39;: &#39;warn&#39;,
    &#39;vue/attributes-order&#39;: &#39;warn&#39;,
    &#39;vue/no-v-html&#39;: &#39;warn&#39;,
    &#39;vue/order-in-components&#39;: &#39;warn&#39;,
    &#39;vue/this-in-template&#39;: &#39;warn&#39;,
}</code></pre>
<h5 id="推荐规则"><a href="#推荐规则" class="headerlink" title="推荐规则"></a>推荐规则</h5><pre><code class="js"> rules: {
    &#39;accessor-pairs&#39;: 2, // 应同时设置setter和getter
    &#39;arrow-spacing&#39;: [2, { before: true, after: true }], // 箭头间距
    &#39;array-bracket-spacing&#39;: [2, &#39;never&#39;], // 不允许数组括号内的空格
    &#39;block-spacing&#39;: [2, &#39;always&#39;], // 块间距
    &#39;brace-style&#39;: [2, &#39;1tbs&#39;, { allowSingleLine: true }], // 大括号样式允许单行
    &#39;camelcase&#39;: [2, { properties: &#39;always&#39; }], //为属性强制执行驼峰命名
    &#39;comma-spacing&#39;: [2, { before: false, after: true }], // 逗号间距
    &#39;comma-style&#39;: [2, &#39;last&#39;], //（默认）与数组元素，对象属性或变量声明在同一行之后和同一行需要逗号
    &#39;consistent-this&#39;: [2, &#39;that&#39;], //强制this别名为that
    &#39;curly&#39;: [2, &#39;multi-line&#39;], // 当一个块只包含一条语句时，不允许省略花括号。
    &#39;dot-location&#39;: [2, &#39;property&#39;], //成员表达式中的点应与属性部分位于同一行
    &#39;dot-notation&#39;: 2, //要求使用点号
    &#39;eol-last&#39;: 2, // 强制文件以换行符结束（LF）
    &#39;eqeqeq&#39;: [2, &#39;always&#39;, { null: &#39;ignore&#39; }], // 强制使用全等
    &#39;generator-star-spacing&#39;: 2, //强制 generator 函数中 * 号周围使用一致的空格
    &#39;global-require&#39;: 1, // 所有调用require()都位于模块的顶层
    &#39;handle-callback-err&#39;: [2, &#39;^(err|error)$&#39;], //要求回调函数中有容错处理
    &#39;indent&#39;: [2, 2, { SwitchCase: 2 }], //缩进风格
    &#39;jsx-quotes&#39;: [2, &#39;prefer-single&#39;],
    &#39;key-spacing&#39;: [2, { beforeColon: false, afterColon: true }], // 强制在对象字面量属性中的键和值之间保持一致的间距
    &#39;keyword-spacing&#39;: [2, { before: true, after: true }], // 关键字如if/function等的间距
    &#39;new-cap&#39;: [2, { newIsCap: true, capIsNew: true }], // 要求构造函数首字母大写;（默认）要求new使用大写启动函数调用所有操作符
    &#39;new-parens&#39;: 2, // 强制或禁止调用无参构造函数时有圆括号
    &#39;no-alert&#39;: 2, //禁止使用alert()
    &#39;no-array-constructor&#39;: 1, // 不允许使用Array构造函数。除非要指定生成数组的长度
    &#39;no-caller&#39;: 2, //禁用 arguments.caller 或 arguments.callee
    &#39;no-console&#39;: 0, //可以使用console
    //禁止使用debugger
    &#39;no-debugger&#39;: process.env.NODE_ENV === &#39;production&#39; ? 1 : 0,
    &#39;no-eval&#39;: 2, //禁用 eval()
    &#39;no-extend-native&#39;: 2, // 不允许直接修改内建对象的原型
    &#39;no-extra-parens&#39;: [2, &#39;functions&#39;], // 仅在函数表达式附近禁止不必要的括号
    &#39;no-extra-bind&#39;: 2, //禁止不必要的函数绑定
    &#39;no-floating-decimal&#39;: 2, //消除浮点小数点，并在数值有小数点但在其之前或之后缺少数字时发出警告
    &#39;no-implied-eval&#39;: 2, // 禁止使用隐含eval()
    &#39;no-iterator&#39;: 2, //禁用 __iterator__ 属性
    &#39;no-label-var&#39;: 2, //禁止创建与范围内的变量共享名称的标签
    &#39;no-labels&#39;: [2, { allowLoop: false, allowSwitch: false }], // 消除 JavaScript 中使用带标签的语句
    &#39;no-lone-blocks&#39;: 2, //消除脚本顶层或其他块中不必要的和可能混淆的块
    &#39;no-multi-spaces&#39;: 2, // 禁止在逻辑表达式，条件表达式，声明，数组元素，对象属性，序列和函数参数周围使用多个空格
    &#39;no-multi-str&#39;: 2, // 防止使用多行字符串
    &#39;no-multiple-empty-lines&#39;: [2, { max: 1 }], // 最多一个空行
    &#39;no-new-object&#39;: 2, // 不允许使用Object构造函数
    &#39;no-new-require&#39;: 2, // 消除new require表达的使用
    &#39;no-new-wrappers&#39;: 2, // 杜绝使用String，Number以及Boolean与new操作
    &#39;no-octal-escape&#39;: 2, // 不允许字符串文字中的八进制转义序列
    &#39;no-path-concat&#39;: 2, // 防止 Node.js 中的目录路径字符串连接无效
    &#39;no-proto&#39;: 2, //禁用__proto__
    &#39;no-return-assign&#39;: [2, &#39;except-parens&#39;], // 消除return陈述中的任务，除非用括号括起来
    &#39;no-self-compare&#39;: 2, // 禁止比较变量自身
    &#39;no-sequences&#39;: 2, // 禁止使用逗号运算符
    &#39;no-throw-literal&#39;: 2, // 不允许抛出不可能是Error对象的文字和其他表达式
    &#39;no-trailing-spaces&#39;: 2, // 不允许在行尾添加尾随空白
    &#39;no-undef-init&#39;: 2, // 消除初始化为undefined的变量声明
    &#39;no-unmodified-loop-condition&#39;: 2, // 查找循环条件内的引用，然后检查这些引用的变量是否在循环中被修改
    &#39;no-unneeded-ternary&#39;: [2, { defaultAssignment: true }], // 允许将条件表达式作为默认的分配模式
    &#39;no-useless-call&#39;: 2, // 标记使用情况，Function.prototype.call()并且Function.prototype.apply()可以用正常的函数调用来替代
    &#39;no-useless-computed-key&#39;: 2, // 禁止不必要地使用计算属性键
    &#39;no-useless-constructor&#39;: 2, // 禁用不必要的构造函数
    &#39;no-whitespace-before-property&#39;: 2, // 如果对象的属性位于同一行上，不允许围绕点或在开头括号之前留出空白
    &#39;no-var&#39;: 2, // 禁用var
    &#39;object-curly-spacing&#39;: [2, &#39;always&#39;, { objectsInObjects: false }], // 不允许以对象元素开始和/或以对象元素结尾的对象的大括号内的间距
    &#39;object-shorthand&#39;: 2, //要求或禁止对象字面量中方法和属性使用简写语法
    &#39;one-var&#39;: [2, { initialized: &#39;never&#39; }], // 强制将变量声明为每个函数（对于var）或块（对于let和const）范围一起声明或单独声明。 initialized: &#39;never&#39; 每个作用域要求多个变量声明用于初始化变量
    &#39;operator-linebreak&#39;: [2, &#39;after&#39;, { overrides: { &#39;?&#39;: &#39;before&#39;, &#39;:&#39;: &#39;before&#39; } }], // 实施一致的换行
    &#39;padded-blocks&#39;: [2, &#39;never&#39;], // 在块内强制执行一致的空行填充
    &#39;prefer-arrow-callback&#39;: 2, //要求使用箭头函数作为回调
    // 要求使用 const 声明那些声明后不再被修改的变量
    &#39;prefer-const&#39;: [
      2,
      {
        ignoreReadBeforeAssign: false,
      },
    ],
    &#39;prefer-rest-params&#39;: 2, // 建议使用剩余参数代替 arguments
    &#39;prefer-spread&#39;: 2, // 建议使用扩展语法而非.apply()
    &#39;prefer-template&#39;: 2, // 建议使用模板字面量而非字符串连接
    // 强制使用单引号
    &#39;quotes&#39;: [
      2,
      &#39;single&#39;,
      {
        avoidEscape: true,
        allowTemplateLiterals: true,
      },
    ],
    // 强制结尾分号
    &#39;semi&#39;: [
      2,
      &#39;always&#39;,
      {
        omitLastInOneLineBlock: true,
      },
    ],
    &#39;semi-spacing&#39;: [2, { before: false, after: true }], // 强制分号间隔
    &#39;space-before-blocks&#39;: [2, &#39;always&#39;], // 块必须至少有一个先前的空间
    &#39;space-before-function-paren&#39;: [2, &#39;never&#39;], // 在(参数后面不允许任何空格
    &#39;space-in-parens&#39;: [2, &#39;never&#39;], // 禁止或要求（或）左边的一个或多个空格
    &#39;space-infix-ops&#39;: 2, // 强制二元运算符左右各有一个空格
    &#39;space-unary-ops&#39;: [2, { words: true, nonwords: false }], // words: true 如：new，delete，typeof，void，yield 左右必须有空格 // nonwords: false 一元运算符，如：-，+，--，++，!，!!左右不能有空格
    &#39;spaced-comment&#39;: [
      2,
      &#39;always&#39;,
      { markers: [&#39;global&#39;, &#39;globals&#39;, &#39;eslint&#39;, &#39;eslint-disable&#39;, &#39;*package&#39;, &#39;!&#39;, &#39;,&#39;] },
    ], // 注释开始后，此规则将强制间距的一致性//或/*
    &#39;template-curly-spacing&#39;: [2, &#39;never&#39;], // 不允许大括号内的空格
    &#39;wrap-iife&#39;: [2, &#39;any&#39;], //立即执行函数表达式的小括号风格
    &#39;yield-star-spacing&#39;: [2, &#39;both&#39;], // 强制执行*周围 yield*表达式的间距，两侧都必须有空格
    &#39;yoda&#39;: [2, &#39;never&#39;], // 要求或者禁止Yoda条件

    &#39;vue/attribute-hyphenation&#39;: 0, // 忽略属性连字
    &#39;vue/html-self-closing&#39;: 0, // 忽略html标签自闭合
    &#39;vue/html-closing-bracket-newline&#39;: 0, // html右括号在新的一行
    // 每行最大属性
    &#39;vue/max-attributes-per-line&#39;: [
      2,
      {
        singleline: 10,
        multiline: {
          max: 1,
          allowFirstLine: false,
        },
      },
    ],
    &#39;vue/multiline-html-element-content-newline&#39;: 0, // 多行html元素内容在新的一行
    &#39;vue/no-unused-components&#39;: 0, // 禁止未使用的组件
    &#39;vue/no-unused-vars&#39;: 0, // 禁止未使用的变量
    &#39;vue/no-use-v-if-with-v-for&#39;: 0, //禁止在同一标签使用v-if和v-for
    &#39;vue/no-parsing-error&#39;: 0,
    &#39;vue/no-v-html&#39;: 0, //禁止使用v-html
    &#39;vue/require-default-prop&#39;: 0, //需要为prop属性定义默认值
    &#39;vue/require-prop-types&#39;: 0, //需要为prop属性定义类型
    &#39;vue/singleline-html-element-content-newline&#39;: 0, // 单行html元素内容在新的一行

    &#39;prettier/prettier&#39;: [
      2,
      {
        printWidth: 120, // 代码行的长度
        tabWidth: 2, // 制表符宽度
        useTabs: false, // 是否使用 tab 代替 space(空格)
        semi: true, // 分号，句尾是否自动补全“分号”
        singleQuote: true, // 引号，是否启用单引号代替双引号
        quoteProps: &#39;consistent&#39;, //一致原则，即对象中若有一个属性添加了引号，其他所有属性都添加
        jsxSingleQuote: true, // jsx使用单引号
        trailingComma: &#39;es5&#39;, // 为多行数组的非末尾行添加逗号
        bracketSpacing: true, // 括号空格，在对象字面量和括号之间添加空格
        jsxBracketSameLine: true, // 启用jsx语法，&gt; 放在末尾
        htmlWhitespaceSensitivity: &#39;ignore&#39;, //指定HTML文件的全局空白区域敏感度
        vueIndentScriptAndStyle: false, //缩进Vue文件中的脚本和样式标记。
        endOfLine: &#39;lf&#39;, //指定结尾的类型,
      },
    ],
  }</code></pre>
<h4 id="parserOptions解析器选项"><a href="#parserOptions解析器选项" class="headerlink" title="parserOptions解析器选项"></a>parserOptions解析器选项</h4><p> 解析器选项可以在 parserOptions 属性设置。设置解析器选项能帮助 ESLint 确定什么是解析错误，所有语言选项默认都是 false</p>
<pre><code class="js">parserOptions: {
    parser: &#39;babel-eslint&#39;, // 解析器，默认使用Espree
    ecmaVersion: 6, // 支持es6语法，但并不意味着同时支持新的 ES6 全局变量或类型（比如 Set 等新类型）
    sourceType: &#39;module&#39;, // 指定来源的类型，&quot;script&quot; (默认) 或 &quot;module&quot;（如果你的代码是 ECMAScript 模块)
    // 使用的额外的语言特性
    ecmaFeatures: {
      jsx: true, // 启用 JSX
      globalReturn: true, // 允许在全局作用域下使用 return 语句
      impliedStrict: true, // 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
      experimentalObjectRestSpread: true, // 启用实验性的 object rest/spread properties 支持。(重要：这是一个实验性的功能,在未来可能会有明显改变。 建议你写的规则 不要 依赖该功能，除非当它发生改变时你愿意承担维护成本。)
    },
}</code></pre>
<h4 id="parser解析器"><a href="#parser解析器" class="headerlink" title="parser解析器"></a>parser解析器</h4><p>ESLint 默认使用<a href="https://github.com/eslint/espree" target="_blank" rel="noopener">Espree</a>作为其解析器，你可以在配置文件中指定一个不同的解析器，只要该解析器符合下列要求：</p>
<ol>
<li>它必须是一个 Node 模块，可以从它出现的配置文件中加载。通常，这意味着应该使用 npm 单独安装解析器包。</li>
<li>它必须符合 <a href="https://eslint.bootcss.com/docs/developer-guide/working-with-plugins#working-with-custom-parsers" target="_blank" rel="noopener">parser interface</a>。</li>
</ol>
<pre><code class="js">parser: &#39;esprima&#39;// &#39;esprima&#39;、&#39;babel-eslint&#39;、&#39;@typescript-eslint/parser&#39;</code></pre>
<p>以下解析器与 ESLint 兼容：</p>
<ul>
<li><a href="https://www.npmjs.com/package/esprima" target="_blank" rel="noopener">Esprima</a></li>
<li><a href="https://www.npmjs.com/package/babel-eslint" target="_blank" rel="noopener">Babel-ESLint</a> - 一个对<a href="https://babeljs.io/" target="_blank" rel="noopener">Babel</a>解析器的包装，使其能够与 ESLint 兼容。</li>
<li><a href="https://www.npmjs.com/package/@typescript-eslint/parser" target="_blank" rel="noopener">@typescript-eslint/parser</a> - 将 TypeScript 转换成与 estree 兼容的形式，以便在ESLint中使用。</li>
</ul>
<h4 id="plugins插件"><a href="#plugins插件" class="headerlink" title="plugins插件"></a>plugins插件</h4><p>ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。</p>
<p>在配置文件里配置插件时，可以使用 <code>plugins</code> 关键字来存放插件名字的列表。插件名称可以省略 <code>eslint-plugin-</code> 前缀。</p>
<pre><code>{
    &quot;plugins&quot;: [
        &quot;plugin1&quot;,
        &quot;eslint-plugin-plugin2&quot;
    ]
}</code></pre><h4 id="processor处理器"><a href="#processor处理器" class="headerlink" title="processor处理器"></a>processor处理器</h4><p>插件可以提供处理器。处理器可以从另一种文件中提取 JavaScript 代码，然后让 ESLint 检测 JavaScript 代码。或者处理器可以在预处理中转换 JavaScript 代码。</p>
<p>若要在配置文件中指定处理器，请使用 <code>processor</code> 键，并使用由插件名和处理器名组成的串接字符串加上斜杠。例如，下面的选项启用插件 <code>a-plugin</code> 提供的处理器 <code>a-processor</code>：更多参考<a href="https://eslint.bootcss.com/docs/user-guide/configuring#specifying-processor" target="_blank" rel="noopener">文档</a></p>
<pre><code class="js">{
    &quot;plugins&quot;: [&quot;a-plugin&quot;],
    &quot;processor&quot;: &quot;a-plugin/a-processor&quot;
}</code></pre>
<h4 id="globals全局变量"><a href="#globals全局变量" class="headerlink" title="globals全局变量"></a>globals全局变量</h4><p>当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。</p>
<pre><code class="js">globals: {
    var1: &#39;writable&#39;, //可写
    var2: &#39;readonly&#39;, //只读
}</code></pre>
<p><strong>注意：</strong>要启用<a href="https://eslint.bootcss.com/docs/rules/no-global-assign" target="_blank" rel="noopener">no-global-assign</a>规则来禁止对只读的全局变量进行修改。</p>
<h4 id="rules规则"><a href="#rules规则" class="headerlink" title="rules规则"></a>rules规则</h4><p>ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：</p>
<ul>
<li><code>&quot;off&quot;</code> 或 <code>0</code> - 关闭规则</li>
<li><code>&quot;warn&quot;</code> 或 <code>1</code> - 开启规则，使用警告级别的错误：<code>warn</code> (不会导致程序退出)</li>
<li><code>&quot;error&quot;</code> 或 <code>2</code> - 开启规则，使用错误级别的错误：<code>error</code> (当被触发的时候，程序会退出)</li>
</ul>
<h3 id="配置文件格式"><a href="#配置文件格式" class="headerlink" title="配置文件格式"></a>配置文件格式</h3><p>ESLint 支持几种格式的配置文件：</p>
<ul>
<li><strong>JavaScript</strong> - 使用 <code>.eslintrc.js</code> 然后输出一个配置对象。</li>
<li><strong>YAML</strong> - 使用 <code>.eslintrc.yaml</code> 或 <code>.eslintrc.yml</code> 去定义配置的结构。</li>
<li><strong>JSON</strong> - 使用 <code>.eslintrc.json</code> 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。</li>
<li><strong>(弃用)</strong> - 使用 <code>.eslintrc</code>，可以使 JSON 也可以是 YAML。</li>
<li><strong>package.json</strong> - 在 <code>package.json</code> 里创建一个 <code>eslintConfig</code>属性，在那里定义你的配置。</li>
</ul>
<p>如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：</p>
<ol>
<li><code>.eslintrc.js</code></li>
<li><code>.eslintrc.yaml</code></li>
<li><code>.eslintrc.yml</code></li>
<li><code>.eslintrc.json</code></li>
<li><code>.eslintrc</code></li>
<li><code>package.json</code></li>
</ol>
<h3 id="eslintignore忽略文件"><a href="#eslintignore忽略文件" class="headerlink" title=".eslintignore忽略文件"></a><code>.eslintignore</code>忽略文件</h3><p>你可以通过在项目根目录创建一个 <code>.eslintignore</code> 文件告诉 ESLint 去忽略特定的文件和目录。<code>.eslintignore</code> 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。例如，以下将忽略所有的 JavaScript 文件：</p>
<pre><code>build/*.js
src/assets
public
dist</code></pre><p>Globs 匹配使用 <a href="https://github.com/kaelzhang/node-ignore" target="_blank" rel="noopener">node-ignore</a>，所以大量可用的特性有：</p>
<ul>
<li>以 <code>#</code> 开头的行被当作注释，不影响忽略模式。</li>
<li>路径是相对于 <code>.eslintignore</code> 的位置或当前工作目录。通过 <code>--ignore-pattern</code> <a href="https://eslint.bootcss.com/docs/user-guide/command-line-interface#--ignore-pattern" target="_blank" rel="noopener">command</a> 传递的路径也是如此。</li>
<li>忽略模式同 <code>.gitignore</code> <a href="https://git-scm.com/docs/gitignore" target="_blank" rel="noopener">规范</a></li>
<li>以 <code>!</code> 开头的行是否定模式，它将会重新包含一个之前被忽略的模式。</li>
<li>忽略模式依照 <code>.gitignore</code> <a href="https://git-scm.com/docs/gitignore" target="_blank" rel="noopener">规范</a>.</li>
</ul>
<h2 id="Prettier"><a href="#Prettier" class="headerlink" title="Prettier"></a>Prettier</h2><h3 id="Prettier-是什么"><a href="#Prettier-是什么" class="headerlink" title="Prettier 是什么"></a><a href="https://prettier.io/" target="_blank" rel="noopener">Prettier</a> 是什么</h3><ul>
<li>一个代码格式工具,支持基本主流前端的语言(js, ts, Es6, Es7,markdown等等)；</li>
<li>会根据书写的代码，重新解析和构建显示格式（即，它清除原来的格式，按照自己认为美丽的方式重新显示代码格式）</li>
<li>Prettier 不会像EsLint，TsLint，StyleLint 那样告诉你，语法哪里错了，它只会告诉你代码这么写不美观</li>
</ul>
<h3 id="Prettier安装"><a href="#Prettier安装" class="headerlink" title="Prettier安装"></a>Prettier安装</h3><blockquote>
<p>两种方式，两个位置，大家随意，注意官方给出的教程中，都是推荐<strong>精确版</strong>本安装的</p>
<p>yarn add prettier –dev –exact</p>
<p>yarn global add prettier</p>
<hr>
<p>npm install –save-dev –save-exact prettier</p>
<p>npm install –global prettier</p>
</blockquote>
<p>使用方式：</p>
<ul>
<li>CLI —-直接命令行 使用cli 调用相关的参数使用</li>
<li>API —-代码中引入prettier包，调用相关的API使用</li>
<li>Browser—在浏览器中使用，注意需要再引入其他依赖包</li>
<li>Plugin—-通过插件使用（官方说明为扩展语言支持实现，有些想webpack的loader）</li>
<li>Pre—commit —— 配合预提交（pre-commit）工具来使用，实现提交代码前的格式化</li>
<li>Onchange —通过使用内置的onchange 在package.json中使用，变动时格式化</li>
<li>Lint —-配合主流的Lint一起使用，比如EsLint，TsLint等等</li>
<li>Ignore—-将文件或者代码，添加到“忽略清单中”，<strong>例如.prettierignore或注释</strong></li>
</ul>
<h3 id="忽略文件-prettierignore"><a href="#忽略文件-prettierignore" class="headerlink" title="忽略文件: .prettierignore"></a>忽略文件: .prettierignore</h3><h3 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h3><ul>
<li>在<code>package.json</code>中定义<code>&quot;prettier&quot;</code> 键值</li>
<li><code>.prettierrc</code> 文件（json或yaml写法）</li>
<li><code>.prettierrc.json</code>, <code>.prettierrc.yml</code>, <code>.prettierrc.yaml</code>,  <code>.prettierrc.json5</code> 文件</li>
<li><code>.prettierrc.js</code>, <code>.prettierrc.cjs</code>, <code>prettier.config.js</code>, <code>prettier.config.cjs</code>文件，使用module.exports导出</li>
<li><code>.prettierrc.toml</code> 文件</li>
</ul>
<h4 id="配置文件示例"><a href="#配置文件示例" class="headerlink" title="配置文件示例"></a>配置文件示例</h4><ul>
<li>JSON:</li>
</ul>
<pre><code class="json">{
  &quot;trailingComma&quot;: &quot;es5&quot;,
  &quot;tabWidth&quot;: 4,
  &quot;semi&quot;: false,
  &quot;singleQuote&quot;: true
}</code></pre>
<ul>
<li>JS:</li>
</ul>
<pre><code class="js">// prettier.config.js or .prettierrc.js
module.exports = {
  trailingComma: &quot;es5&quot;,
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};</code></pre>
<ul>
<li>YAML:</li>
</ul>
<pre><code class="yaml"># .prettierrc or .prettierrc.yaml
trailingComma: &quot;es5&quot;
tabWidth: 4
semi: false
singleQuote: true</code></pre>
<ul>
<li>TOML:</li>
</ul>
<pre><code class="toml"># .prettierrc.toml
trailingComma = &quot;es5&quot;
tabWidth = 4
semi = false
singleQuote = true</code></pre>
<h4 id="配置参数说明"><a href="#配置参数说明" class="headerlink" title="配置参数说明"></a>配置参数说明</h4><ul>
<li><p><strong>printWidth</strong>    代码行的长度， 默认是80 ， <strong>官方建议不要超过120，即80-120之间即可</strong></p>
</li>
<li><p><strong>tabWidth</strong>   制表符宽度，每个层级缩进几个空格。默认值 2</p>
</li>
<li><p><strong>useTabs</strong>   是否使用 tab 代替 space(空格) 为单位缩进，默认 false</p>
</li>
<li><p><strong>semi</strong> 分号，句尾是否自动补全“分号”，默认 true</p>
</li>
<li><p><strong>singleQuote</strong>  引号，是否启用单引号代替双引号，默认值false</p>
</li>
<li><p><strong>quoteProps</strong>  对象属性的引号，默认值<code>&quot;as-needed&quot;</code> –按需添加；<code>&quot;consistent&quot;</code> –一致原则，即对象中若有一个属性添加了引号，其他所有属性都添加；<code>&quot;preserve&quot;</code>–遵循原则，遵循输入的引号</p>
</li>
<li><p><strong>jsxSingleQuote</strong>   在 JSX 文件中使用单引号代替双引号，默认值 false</p>
</li>
<li><p><strong>trailingCommas</strong>   为多行数组的非末尾行添加逗号（单行数组不需要逗号），默认值“none”;<code>&quot;none&quot;</code> - -不添加逗号;<code>&quot;es5&quot;</code> - 在 ES5 中生效的逗号 (对象，数组等等);<code>&quot;all&quot;</code> - 任何可以添加逗号的地方 (包括函数实参). 此配置需要 node 8 或一个 <a href="https://links.jianshu.com/go?to=https%3A%2F%2Fbabeljs.io%2Fdocs%2Fplugins%2Fsyntax-trailing-function-commas%2F" target="_blank" rel="noopener">transform</a> 方法。</p>
</li>
<li><p><strong>bracketSpacing</strong>   括号空格，在对象字面量和括号之间添加空格，配置项， 默认值 true</p>
</li>
<li><p><strong>jsxBracketSameLine</strong>  将多行 JSX 元素的 &gt; 放置于最后一行的末尾，而非换行。，默认值为false</p>
</li>
<li><p><strong>arrowParens</strong>  是否启用总是让箭头函数的参数括号  默认值为<code>&quot;aviod&quot;</code>–在可以消除的情况下，消除括号<code>&quot;always&quot;</code> - -一直保留括号. Example: (x) =&gt; x</p>
</li>
<li><p><strong>rangeStart</strong>   区间格式化,两个配置项可以用于「起始」(闭区间)/ 「截止」(开区间) 于某个标识：</p>
<ul>
<li><strong>rangeStart</strong>,包含被选中语句，向上至第一行都是选中的区间</li>
<li><strong>rangeEnd</strong>选中区间从该行向下至最后一行</li>
</ul>
<p>与 <code>cursorOffset</code> 冲突，不可同时使用。</p>
</li>
<li><p><strong>parser</strong>  语法解析器   默认值为none，<strong>Prettier 可以根据文件路径推断出解析器的类型，因此无需更改此配置项。</strong></p>
</li>
<li><p><strong>filePath</strong>  指定文件名称以确认应用何种解析器。。  默认值 none【一般用不上】</p>
</li>
<li><p><strong>requirePragma</strong>   是否启用注解格式化，即配置注解的格式化，不配置的不格式化，默认值：false（类似 @prettier）【当逐步将大型未格式化的代码库转换为prettier的代码库时，这非常有用。】</p>
</li>
<li><p><strong>insertPragma</strong>    Prettier可以在文件顶部插入一个特殊的@format标记，指定文件格式更漂亮，默认值false；</p>
</li>
<li><p><strong>proseWrap</strong>   与markdown 有关系 默认值 preserve</p>
</li>
<li><p><strong>htmlWhitespaceSensitivity</strong>  指定HTML文件的全局空白区域敏感度  默认值 css ,遵循 CSS <code>display</code> 属性的默认值</p>
</li>
<li><p><strong>vueIndentScriptAndStyle</strong>  缩进Vue文件中的脚本和样式标记。</p>
</li>
<li><p><strong>endOfLine</strong>  指定结尾的类型，lf |rc|crlf |auto  ，默认值auto</p>
</li>
</ul>
<h4 id="推荐配置-prettierrc-js"><a href="#推荐配置-prettierrc-js" class="headerlink" title="推荐配置.prettierrc.js"></a>推荐配置<code>.prettierrc.js</code></h4><pre><code class="js">module.exports = {
  printWidth: 120, // 代码行的长度
  tabWidth: 2, // 制表符宽度
  useTabs: false, // 是否使用 tab 代替 space(空格)
  semi: true, // 分号，句尾是否自动补全“分号”
  singleQuote: true, // 引号，是否启用单引号代替双引号
  quoteProps: &#39;consistent&#39;, //一致原则，即对象中若有一个属性添加了引号，其他所有属性都添加
  jsxSingleQuote: true, // jsx使用单引号
  trailingComma: &#39;es5&#39;, // 为多行数组的非末尾行添加逗号
  bracketSpacing: true, // 括号空格，在对象字面量和括号之间添加空格
  jsxBracketSameLine: true, // 启用jsx语法，&gt; 放在末尾
  htmlWhitespaceSensitivity: &#39;ignore&#39;, //指定HTML文件的全局空白区域敏感度
  vueIndentScriptAndStyle: false, //缩进Vue文件中的脚本和样式标记。
  endOfLine: &#39;lf&#39; //指定结尾的类型,
}</code></pre>
<h2 id="editorconfig"><a href="#editorconfig" class="headerlink" title=".editorconfig"></a>.editorconfig</h2><p>根目录下创建<code>.editorconfig</code>文件</p>
<pre><code># https://editorconfig.org
# 告诉EditorConfig插件，这是根文件，不用继续往上查找
root = true
# 匹配全部文件
[*]
charset = utf-8 # 设置字符集
indent_style = space # 缩进风格，可选&quot;space&quot;、&quot;tab&quot;
indent_size = 2 # 缩进的空格数
end_of_line = lf # 结尾换行符，可选&quot;lf&quot;、&quot;cr&quot;、&quot;crlf&quot;
insert_final_newline = true # 在文件结尾插入新行
trim_trailing_whitespace = true # 删除行尾空格

[*.md]
trim_trailing_whitespace = false</code></pre><h2 id="gitattributes"><a href="#gitattributes" class="headerlink" title=".gitattributes"></a>.gitattributes</h2><pre><code>* text=auto eol=lf</code></pre><h2 id="插件安装"><a href="#插件安装" class="headerlink" title="插件安装"></a>插件安装</h2><p>vscode 插件选项搜索这 4 个：<code>Vetur、ESLint、Prettir-Code formatter、Prettier ESLint</code> 直接安装。</p>
<h2 id="插件使用"><a href="#插件使用" class="headerlink" title="插件使用"></a>插件使用</h2><p>在项目的根目录创建.vscode文件夹， 然后再在其下面创建settings.json文件，将这个文件夹同步到git.</p>
<p>创建好文件后，添加下述配置：</p>
<pre><code class="json">{
  &quot;editor.tabSize&quot;: 2,
  &quot;editor.multiCursorModifier&quot;: &quot;ctrlCmd&quot;,
  &quot;------editor.codeActionsOnSave------&quot;: &quot;开启 eslint 自动修复 js/ts 功能，最新语法&quot;,
  &quot;editor.codeActionsOnSave&quot;: {
    &quot;source.fixAll.eslint&quot;: true
  },
  &quot;editor.formatOnPaste&quot;: true,
  &quot;editor.formatOnType&quot;: true,
  &quot;editor.formatOnSave&quot;: true,
  &quot;files.exclude&quot;: {
    &quot;**/.idea&quot;: true
  },
  &quot;files.eol&quot;: &quot;\n&quot;,
  &quot;eslint.alwaysShowStatus&quot;: true,
  &quot;eslint.format.enable&quot;: true,
  &quot;eslint.validate&quot;: [
    &quot;javascript&quot;,
    &quot;javascriptreact&quot;,
    &quot;typescript&quot;,
    &quot;typescriptreact&quot;,
    &quot;html&quot;,
    &quot;vue&quot;,
    &quot;markdown&quot;,
  ],
  &quot;prettier.arrowParens&quot;: &quot;avoid&quot;,
  &quot;prettier.jsxSingleQuote&quot;: true,
  &quot;prettier.jsxBracketSameLine&quot;: true,
  &quot;prettier.printWidth&quot;: 120,
  &quot;prettier.singleQuote&quot;: true,
  &quot;prettier.quoteProps&quot;: &quot;consistent&quot;,
  &quot;[vue]&quot;: {
    &quot;editor.defaultFormatter&quot;: &quot;esbenp.prettier-vscode&quot;
  },
  &quot;------typescript------&quot;: &quot;参考自 https://github.com/microsoft/vscode&quot;,
  &quot;[typescript]&quot;: {
    &quot;editor.defaultFormatter&quot;: &quot;vscode.typescript-language-features&quot;
  },
  &quot;typescript.tsc.autoDetect&quot;: &quot;off&quot;,
  &quot;------mark below------&quot;: &quot;关闭 vetur 中、js/ts 中的默认 format 格式化，打开 eslint 格式化&quot;,
  &quot;javascript.format.enable&quot;: false,
  &quot;vetur.format.defaultFormatter.js&quot;: &quot;none&quot;,
  &quot;typescript.format.enable&quot;: false,
  &quot;vetur.format.defaultFormatter.ts&quot;: &quot;none&quot;,
  &quot;terminal.integrated.automationShell.windows&quot;: &quot;D:\\Program Files\\Git\\bin\\bash.exe&quot;,
}</code></pre>

      
       <hr><span style="font-style: italic;color: gray;"> 转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 86415270@qq.com </span>
    </div>
</article>


<p>
    <a class="dashang" onclick="dashangToggle()">赏</a>
</p>


<div class="article_copyright">
    <p><span class="copy-title">文章标题:</span>vscode上配置Eslint+Prettier</p>
    <p><span class="copy-title">文章字数:</span><span class="post-count">7.7k</span></p>
    <p><span class="copy-title">本文作者:</span><a title="李瑞桐">李瑞桐</a></p>
    <p><span class="copy-title">发布时间:</span>2021-02-01, 00:00:00</p>
    <p><span class="copy-title">最后更新:</span>2022-11-20, 17:10:34</p>
    <span class="copy-title">原始链接:</span><a class="post-url" href="/lrt_blog/2021/02/01/66%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/vscode%E4%B8%8A%E9%85%8D%E7%BD%AEEslint-Prettier/" title="vscode上配置Eslint+Prettier">https://loveyangxiaoyu.gitee.io/lrt_blog/2021/02/01/66%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/vscode%E4%B8%8A%E9%85%8D%E7%BD%AEEslint-Prettier/</a>
    <p>
        <span class="copy-title">版权声明:</span><i class="fa fa-creative-commons"></i> <a rel="license noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" title="CC BY-NC-SA 4.0 International" target = "_blank">"署名-非商用-相同方式共享 4.0"</a> 转载请保留原文链接及作者。
    </p>
</div>



    <div id="comments"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">

<script type="text/javascript">
    $.getScript('/lrt_blog/js/gitalk.js', function () {
        var gitalk = new Gitalk({
            clientID: '977658d53bffc49a7231',
            clientSecret: 'bd5ef398e64a580d122200d984d56f6da067ff83',
            repo: 'lrt890424.github.io',
            owner: 'lrt890424',
            admin: ['lrt890424'],
            id: decodeURI(location.pathname),
            distractionFreeMode: 'true',
            language: 'zh-CN',
            perPage: parseInt('10',10)
        })
        gitalk.render('comments')
    })
</script>




    




    </div>
    <div class="copyright">
        <p class="footer-entry">©2016-2020 Li Ruitong</p>
<p class="footer-entry">Built with <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/yelog/hexo-theme-3-hexo" target="_blank">3-hexo</a> theme</p>

    </div>
    <div class="full-toc">
        <button class="full"><span class="min "></span></button>
<button class="post-toc-menu"><span class="post-toc-menu-icons"></span></button>
<div class="post-toc"><span class="post-toc-title">目录</span>
    <div class="post-toc-content">

    </div>
</div>
<a class="" id="rocket" ></a>
    </div>
</div>
<div class="acParent"></div>

<div class="hide_box" onclick="dashangToggle()"></div>
<div class="shang_box">
    <a class="shang_close" onclick="dashangToggle()">×</a>
    <div class="shang_tit">
        <p>喜欢就点赞,疼爱就打赏</p>
    </div>
    <div class="shang_payimg">
        <div class="pay_img">
            <img src="/lrt_blog/img/alipay.jpg" class="alipay" title="扫码支持">
            <img src="/lrt_blog/img/weixin.jpg" class="weixin" title="扫码支持">
        </div>
    </div>
    <div class="shang_payselect">
        <span><label><input type="radio" name="pay" checked value="alipay">支付宝</label></span><span><label><input type="radio" name="pay" value="weixin">微信</label></span>
    </div>
</div>


</body>
<script src="/lrt_blog/js/jquery.pjax.js?v=1.0.0" ></script>

<script src="/lrt_blog/js/script.js?v=1.0.0" ></script>
<!-- 代码块复制功能 -->
<script type="text/javascript" src="/lrt_blog/js/clipboard.min.js"></script>
<script type="text/javascript" src="/lrt_blog/js/clipboard-use.js"></script>
<!-- mermaid chart -->

<script src='https://unpkg.com/mermaid@7.1.2/dist/mermaid.min.js'></script>
<script>
    if (window.mermaid) {
        mermaid.initialize({theme: 'forest'});
    }
</script>

<script>
    var img_resize = 'default';
    /*作者、标签的自动补全*/
    $(function () {
        $('.search').AutoComplete({
            'data': ['#教程','#centos','#linux','#问题集锦','#防火墙','#软件安装','#ubuntu','#svn','#git','#MongoDB','#jd-gui','#java','#反编译','#MySQL','#Redis','#学习笔记','#navicat','#DM','#windows','#系统优化','#书签','#Nginx','#docker','#vue','#Yarn','#前端开发','#vscode','#eslint','#prettier','#Markdown','#hexo','#开源','#Maven',],
            'itemHeight': 20,
            'width': 418
        }).AutoComplete('show');
    })
    function initArticle() {
        /*渲染对应的表格样式*/
        
            $(".post .pjax table").addClass("green_title");
        

        /*渲染打赏样式*/
        
        $("input[name=pay]").on("click", function () {
            if($("input[name=pay]:checked").val()=="weixin"){
                $(".shang_box .shang_payimg .pay_img").addClass("weixin_img");
            } else {
                $(".shang_box .shang_payimg .pay_img").removeClass("weixin_img");
            }
        })
        

        /*高亮代码块行号*/
        
        $('pre code').each(function(){
            var lines = $(this).text().split('\n').length, widther='';
            if (lines>99) {
                widther = 'widther'
            }
            var $numbering = $('<ul/>').addClass('pre-numbering ' + widther).attr("unselectable","on");
            $(this).addClass('has-numbering ' + widther)
                    .parent()
                    .append($numbering);
            for(var i=1;i<=lines;i++){
                $numbering.append($('<li/>').text(i));
            }
        });
        

        /*访问数量*/
        
        $.getScript("//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");
        

        /*代码高亮，行号对齐*/
        $('.pre-numbering').css('line-height',$('.has-numbering').css('line-height'));

        
    }

    /*打赏页面隐藏与展示*/
    
    function dashangToggle() {
        $(".shang_box").fadeToggle();
        $(".hide_box").fadeToggle();
    }
    

</script>

<!--加入行号的高亮代码块样式-->

<style>
    pre{
        position: relative;
        margin-bottom: 24px;
        border-radius: 10px;
        border: 1px solid #e2dede;
        background: #FFF;
        overflow: hidden;
    }
    code.has-numbering{
        margin-left: 30px;
    }
    code.has-numbering.widther{
        margin-left: 35px;
    }
    .pre-numbering{
        margin: 0px;
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        padding: 0.5em 3px 0.7em 5px;
        border-right: 1px solid #C3CCD0;
        text-align: right;
        color: #AAA;
        background-color: #fafafa;
    }
    .pre-numbering.widther {
        width: 35px;
    }
</style>

<!--自定义样式设置-->
<style>
    
    
    .nav {
        width: 542px;
    }
    .nav.fullscreen {
        margin-left: -542px;
    }
    .nav-left {
        width: 120px;
    }
    
    
    @media screen and (max-width: 1468px) {
        .nav {
            width: 492px;
        }
        .nav.fullscreen {
            margin-left: -492px;
        }
        .nav-left {
            width: 100px;
        }
    }
    
    
    @media screen and (max-width: 1024px) {
        .nav {
            width: 492px;
            margin-left: -492px
        }
        .nav.fullscreen {
            margin-left: 0;
        }
        .nav .hide-list.fullscreen {
            left: 492px
        }
    }
    
    @media screen and (max-width: 426px) {
        .nav {
            width: 100%;
        }
        .nav-left {
            width: 100%;
        }
    }
    
    
    .nav-right .title-list nav a .post-title, .nav-right .title-list #local-search-result a .post-title {
        color: #383636;
    }
    
    
    .nav-right .title-list nav a .post-date, .nav-right .title-list #local-search-result a .post-date {
        color: #5e5e5f;
    }
    
    
    .nav-right nav a.hover, #local-search-result a.hover{
        background-color: #e2e0e0;
    }
    
    

    /*列表样式*/
    
    .post .pjax article .article-entry>ol, .post .pjax article .article-entry>ul, .post .pjax article>ol, .post .pjax article>ul{
        border: #e2dede solid 1px;
        border-radius: 10px;
        padding: 10px 32px 10px 56px;
    }
    .post .pjax article .article-entry li>ol, .post .pjax article .article-entry li>ul,.post .pjax article li>ol, .post .pjax article li>ul{
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .post .pjax article .article-entry>ol>li, .post .pjax article .article-entry>ul>li,.post .pjax article>ol>li, .post .pjax article>ul>li{
        margin-bottom: auto;
        margin-left: auto;
    }
    .post .pjax article .article-entry li>ol>li, .post .pjax article .article-entry li>ul>li,.post .pjax article li>ol>li, .post .pjax article li>ul>li{
        margin-bottom: auto;
        margin-left: auto;
    }
    

    /* 背景图样式 */
    
    


    /*引用块样式*/
    

    /*文章列表背景图*/
    

    
</style>







</html>
